<template>
  <div class="page-container">
    <!-- 页面标题 -->
    <div class="flex justify-between items-center mb-6">
      <div>
        <h1 class="page-title">系统设置</h1>
        <div class="breadcrumb-container">
          <router-link to="/" class="link link-hover">首页</router-link>
          <span class="mx-2">/</span>
          <span>系统管理</span>
          <span class="mx-2">/</span>
          <span>系统设置</span>
        </div>
      </div>
      <div class="btn-group">
        <button
          class="btn btn-primary gap-2"
          :class="{ loading: isSaving }"
          @click="handleSave"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M7.707 10.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V6h5a2 2 0 012 2v7a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h5v5.586l-1.293-1.293zM9 4a1 1 0 012 0v2H9V4z" />
          </svg>
          保存设置
        </button>
      </div>
    </div>

    <!-- 设置表单 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <!-- 基础设置 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h2 class="card-title">基础设置</h2>
          <div class="space-y-4">
            <div class="form-control">
              <label class="label">
                <span class="label-text">系统名称</span>
              </label>
              <input
                type="text"
                v-model="form.siteName"
                placeholder="请输入系统名称"
                class="input input-bordered"
                :class="{ 'input-error': errors.siteName }"
              />
              <label class="label" v-if="errors.siteName">
                <span class="label-text-alt text-error">{{ errors.siteName }}</span>
              </label>
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">系统Logo</span>
              </label>
              <div class="flex items-center gap-4">
                <img
                  :src="form.logo"
                  alt="Logo"
                  class="w-16 h-16 object-contain bg-base-200 rounded-lg"
                />
                <input
                  type="text"
                  v-model="form.logo"
                  placeholder="请输入Logo URL"
                  class="input input-bordered flex-1"
                  :class="{ 'input-error': errors.logo }"
                />
              </div>
              <label class="label" v-if="errors.logo">
                <span class="label-text-alt text-error">{{ errors.logo }}</span>
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- 主题设置 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h2 class="card-title">主题设置</h2>
          <div class="space-y-4">
            <div class="form-control">
              <label class="label">
                <span class="label-text">主色调</span>
              </label>
              <input
                type="color"
                v-model="form.theme.primary"
                class="w-full h-12 rounded-lg cursor-pointer"
              />
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">次色调</span>
              </label>
              <input
                type="color"
                v-model="form.theme.secondary"
                class="w-full h-12 rounded-lg cursor-pointer"
              />
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">强调色</span>
              </label>
              <input
                type="color"
                v-model="form.theme.accent"
                class="w-full h-12 rounded-lg cursor-pointer"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 安全设置 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h2 class="card-title">安全设置</h2>
          <div class="space-y-4">
            <div class="form-control">
              <label class="label">
                <span class="label-text">密码最小长度</span>
              </label>
              <input
                type="number"
                v-model="form.security.passwordMinLength"
                min="6"
                max="32"
                class="input input-bordered"
                :class="{ 'input-error': errors.passwordMinLength }"
              />
              <label class="label" v-if="errors.passwordMinLength">
                <span class="label-text-alt text-error">{{ errors.passwordMinLength }}</span>
              </label>
            </div>
            <div class="form-control">
              <label class="label cursor-pointer">
                <span class="label-text">启用密码复杂度要求</span>
                <input
                  type="checkbox"
                  v-model="form.security.passwordComplexity"
                  class="toggle"
                />
              </label>
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">会话超时时间（分钟）</span>
              </label>
              <input
                type="number"
                v-model="form.security.sessionTimeout"
                min="5"
                max="1440"
                class="input input-bordered"
                :class="{ 'input-error': errors.sessionTimeout }"
              />
              <label class="label" v-if="errors.sessionTimeout">
                <span class="label-text-alt text-error">{{ errors.sessionTimeout }}</span>
              </label>
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">最大登录尝试次数</span>
              </label>
              <input
                type="number"
                v-model="form.security.maxLoginAttempts"
                min="3"
                max="10"
                class="input input-bordered"
                :class="{ 'input-error': errors.maxLoginAttempts }"
              />
              <label class="label" v-if="errors.maxLoginAttempts">
                <span class="label-text-alt text-error">{{ errors.maxLoginAttempts }}</span>
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- 通知设置 -->
      <div class="card bg-base-100 shadow-lg">
        <div class="card-body">
          <h2 class="card-title">通知设置</h2>
          <div class="space-y-4">
            <div class="form-control">
              <label class="label cursor-pointer">
                <span class="label-text">启用邮件通知</span>
                <input
                  type="checkbox"
                  v-model="form.notification.email"
                  class="toggle"
                />
              </label>
            </div>
            <div class="form-control">
              <label class="label cursor-pointer">
                <span class="label-text">启用桌面通知</span>
                <input
                  type="checkbox"
                  v-model="form.notification.desktop"
                  class="toggle"
                />
              </label>
            </div>
            <div class="form-control">
              <label class="label cursor-pointer">
                <span class="label-text">启用声音提醒</span>
                <input
                  type="checkbox"
                  v-model="form.notification.sound"
                  class="toggle"
                />
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { SystemService, type SystemSettings } from '@/api/services'
import { useLoadingStore } from '@/stores/loading'
import { useToast } from '@/composables/useToast'

const loadingStore = useLoadingStore()
const toast = useToast()

// 状态
const isSaving = ref(false)

// 表单
const form = reactive<SystemSettings>({
  siteName: '',
  logo: '',
  theme: {
    primary: '#60a5fa',
    secondary: '#f59e0b',
    accent: '#8b5cf6',
  },
  security: {
    passwordMinLength: 8,
    passwordComplexity: true,
    sessionTimeout: 30,
    maxLoginAttempts: 5,
  },
  notification: {
    email: true,
    desktop: true,
    sound: true,
  },
})

interface FormErrors {
  siteName?: string
  logo?: string
  passwordMinLength?: string
  sessionTimeout?: string
  maxLoginAttempts?: string
}

const errors = reactive<FormErrors>({})

// 方法
const loadSettings = async () => {
  try {
    loadingStore.show()
    const settings = await SystemService.getSettings()
    Object.assign(form, settings)
  } catch (error: any) {
    toast.error(error.message)
  } finally {
    loadingStore.hide()
  }
}

const validateForm = () => {
  let isValid = true
  errors.siteName = ''
  errors.logo = ''
  errors.passwordMinLength = ''
  errors.sessionTimeout = ''
  errors.maxLoginAttempts = ''

  if (!form.siteName) {
    errors.siteName = '请输入系统名称'
    isValid = false
  }

  if (!form.logo) {
    errors.logo = '请输入Logo URL'
    isValid = false
  }

  if (form.security.passwordMinLength < 6 || form.security.passwordMinLength > 32) {
    errors.passwordMinLength = '密码长度必须在6-32位之间'
    isValid = false
  }

  if (form.security.sessionTimeout < 5 || form.security.sessionTimeout > 1440) {
    errors.sessionTimeout = '会话超时时间必须在5-1440分钟之间'
    isValid = false
  }

  if (form.security.maxLoginAttempts < 3 || form.security.maxLoginAttempts > 10) {
    errors.maxLoginAttempts = '最大登录尝试次数必须在3-10次之间'
    isValid = false
  }

  return isValid
}

const handleSave = async () => {
  if (!validateForm()) {
    toast.warning('请检查表单填写是否正确')
    return
  }

  try {
    isSaving.value = true
    await SystemService.updateSettings(form)
    toast.success('保存成功')
  } catch (error: any) {
    toast.error(error.message)
  } finally {
    isSaving.value = false
  }
}

// 生命周期
onMounted(() => {
  loadSettings()
})
</script>
